<template>
  <div class="login">
    <div class="loginBox">
      <el-form ref="form" :model="form" label-width="80px" class="login-form">
        <div class="title-container">
          <div class="logoInfo"><i></i><span>用户登录</span></div>
          <div
            class="international "
            @click="$store.commit('changeLauge')"
            style="cursor:pointer"
          >
            <i class="iconfont iconlanguage"></i>
          </div>
        </div>

        <el-form-item>
          <el-input
            placeholder="请输入用户名"
            v-model="form.username"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :type="password"
            v-model="form.password"
            placeholder="请输入密码"
            :show-password="false"
          >
            <template v-slot:prefix>
              <i
                style="color:#889AA4; width: 25px;line-height: 47px; font-size: 18px; margin-left: 3px;"
                class="iconfont iconyanzhengma"
              ></i
            ></template>
            <template v-slot:suffix>
              <i
                style="color:#889AA4; width: 25px;line-height: 47px; font-size: 18px; margin-right: 10px;"
                class="iconfont iconbiyanjing"
                @click="change"
              ></i></template
          ></el-input>
        </el-form-item>

        <el-row>
          <el-button @click="onlogin" type="primary">{{
            this.$store.state.language === 0 ? '登录' : 'Login In'
          }}</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/login'
import { setItem } from '@/utils/storage'

export default {
  data() {
    return {
      form: {
        username: 'root@admin.com',
        password: '123456'
      },
      password: 'password'
    }
  },
  created() {},
  computed: {},
  methods: {
    async onlogin() {
      const username = this.form.username
      const password = this.form.password
      try {
        const { data } = await login({ username, password })
        setItem('user', data.token)
        this.$store.commit('getToken', data.token)
        this.$router.push('/')
      } catch (err) {
        console.dir(err)
      }
    },
    change() {
      this.$nextTick(function() {
        if (this.password === 'text') {
          this.password = 'password'
        } else {
          this.password = 'text'
        }
      })
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: url('../../assets/bg.2f46505a.jpg') no-repeat;
  background-size: cover;
  .loginBox {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background: url('../../assets/logingBg.989212c0.png') no-repeat right bottom;
    .title-container {
      height: 41px;
      position: relative;
      .international {
        position: absolute;
        top: 5px;
        right: 0;
        .iconfont {
          font-size: 20px;
        }
      }
      .logoInfo {
        padding-bottom: 15px;
        i {
          background: url('../../assets/下载.png') no-repeat;
          display: inline-block;
          width: 35px;
          height: 26px;
          float: left;
        }
        span {
          font-size: 22px;
          line-height: 23px;
          padding: 0 10px;
          float: left;
        }
      }
    }

    .login-form {
      .el-row {
        width: 100%;
        margin-bottom: 30px;
        .el-button {
          width: 100%;
          height: 50px;
          line-height: 20px;
          font-size: 22px;
        }
      }

      box-sizing: border-box;
      position: absolute;
      left: 20%;
      top: 50%;
      width: 520px;
      padding: 35px 35px 15px 35px;
      margin: -200px 0 0 0;
      background: #f5f5f5;
      .el-form-item {
        border: 1px solid #dcdfe6;
        background: #fff;
        border-radius: 5px;
        color: #454545;
        width: 450px;
        margin-bottom: 22px;
        /deep/.el-form-item__content {
          line-height: 36px;
          position: relative;
          font-size: 14px;
          margin-left: 0 !important;
          line-height: 36px;
          .el-input {
            .el-input__prefix {
              color: #889aa4;
            }
            input {
              background: transparent;
              border: 0;
              -webkit-appearance: none;
              border-radius: 0;
              padding: 12px 5px 12px 15px;
              color: #333;
              height: 47px;
              text-indent: 20px;
              &::-ms-reveal {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
